<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
	<ui:composition template="/template.xhtml">
		<ui:define name="header">
		<title><h:outputText value="#{specialStoryAction.story.title}" /></title>
		<style type="text/css">
			.comment_bg{
				background-color: #faf8f0;
				margin: 10px 0px 20px;
				border-left: 3px solid;
				border-color: #faebcc;
				box-sizing: border-box;
				display: block;
				padding: 5px;
				color: #8a6d3b;
			}
		</style>
		</ui:define>
		<ui:define name="meta">
			<meta name="keywords" content="#{specialStoryAction.story.title},爱转发,i转发,新鲜事,新奇事" />
			<meta name="description" content="#{specialStoryAction.story.comment}" />
		</ui:define>
		<ui:define name="body">
		
			<ui:include src="header.html"></ui:include>
			
			<!-- CONTENT CONTAINER -->
			<div class="container">
			<div class="row">
				<div class="col-xs-12 col-md-8 col-lg-7 col-lg-offset-1" >
				<div class="panel panel-default" >
  				<div class="panel-body">
  					<div class="page-header hidden-xs">
					  <h2><h:outputText value="#{specialStoryAction.story.title}" /></h2>
					</div>
					<div class="page-header visible-xs">
					  <h4><h:outputText value="#{specialStoryAction.story.title}" /></h4>
					</div>
					<span class="glyphicon glyphicon-calendar"></span>&nbsp;<h:outputText value="#{specialStoryAction.story.publishDate}"><f:convertDateTime type="date" dateStyle="short" locale="zh" timeZone="GMT+8" pattern="yyyy-MM-dd"></f:convertDateTime></h:outputText>
					<span class="hidden-xs"><span class="glyphicon glyphicon-th-list" style="margin-left: 20px;"></span>&nbsp;<h:outputText value="#{specialStoryAction.story.categoryName}"></h:outputText></span>
					<span class="glyphicon glyphicon-eye-open" style="margin-left: 20px;"></span>&nbsp;阅读次数：<h:outputText value="#{specialStoryAction.story.ranking}"></h:outputText> 次
					
					<div class="bdsharebuttonbox hidden-xs hidden-print">
						<a href="#" class="bds_more" data-cmd="more">分享到：</a>
						<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
						<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
						<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
						<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
						<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
						<a href="#" class="bds_tsohu" data-cmd="tsohu" title="分享到搜狐微博">搜狐微博</a>
						<a href="#" class="bds_t163" data-cmd="t163" title="分享到网易微博">网易微博</a>
						<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>
						<a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到开心网">开心网</a>
						<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook">Facebook</a>
						<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter">Twitter</a>
						<a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin">linkedin</a>
						<a href="#" class="bds_print" data-cmd="print" title="打印">打印</a>
					</div>
					<hr></hr>
					
					<div class="comment_bg">
						<h4><h:outputText value="#{specialStoryAction.story.comment}" /></h4>
					</div>
					<p>
						<h:outputText escape="false" value="#{specialStoryAction.story.content}"></h:outputText>
					</p>
					<hr></hr>
					<div class="bdsharebuttonbox hidden-xs hidden-print">
						<a href="#" class="bds_more" data-cmd="more">分享到：</a>
						<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
						<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
						<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
						<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
						<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
						<a href="#" class="bds_tsohu" data-cmd="tsohu" title="分享到搜狐微博">搜狐微博</a>
						<a href="#" class="bds_t163" data-cmd="t163" title="分享到网易微博">网易微博</a>
						<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>
						<a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到开心网">开心网</a>
						<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook">Facebook</a>
						<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter">Twitter</a>
						<a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin">linkedin</a>
						<a href="#" class="bds_print" data-cmd="print" title="打印">打印</a>
					</div>
					<hr class="hidden-xs"></hr>
					<div class="text-center">
						<ul class="pager">
						  <li><h:link target="_self" outcome="item.i?id=#{specialStoryAction.story.nextStoryId}" value="后一篇"/></li>
						  <li><h:link target="_self" outcome="articles.i" value="回首页"/></li>
						  <li><h:link target="_self" outcome="item.i?id=#{specialStoryAction.story.preStoryId}" value="前一篇"/></li>
						</ul>
						
					</div>
  				</div>
  				</div>
				</div>
				
				<ui:include src="most_read.xhtml"></ui:include>
			</div>
			</div>
				
			<ui:insert>
        		<ui:include src="footer.html" />
        	</ui:insert>

		</ui:define>
		<ui:define name="insert-js-at-the-end">
			<script>
				window._bd_share_config={
						"common":{
							bdText : '<h:outputText value="#{specialStoryAction.story.title}" />',
							bdDesc : '<h:outputText value="#{specialStoryAction.story.comment}" />',
							bdUrl : '#{request.requestURL}#{request.queryString == null? "":"?"}#{request.queryString}',
							bdPic : '<h:outputText value="#{specialStoryAction.story.thumbnailPath}" />'
							},
						"share":{
							"bdSize":32
							}};
				with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
			</script>
			<script>
				$("img.lazy").lazyload({failure_limit : 50,threshold : 200,effect : "fadeIn"});
			</script>
		</ui:define>
	</ui:composition>
</h:body>
</html>